<!--
 * @Description: 站点管理
 * @Autor: wangwangwang
 * @Date: 2021-01-30 14:08:50
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-26 10:13:38
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px">站点编码</span>
                <el-input v-model="tableParam.code" style="width: 150px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px">
                <span style="margin-right: 12px">站点名称</span>
                <el-input v-model="tableParam.stationName" style="width: 150px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px">
                <span style="margin-right: 12px">公司名称</span>
                <el-input v-model="tableParam.company" style="width: 150px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px">
                <span style="margin-right: 12px">负责人</span>
                <el-input v-model="tableParam.principalName" style="width: 150px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0" @click="addPoint()">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
                添加
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHANCHU'))!==-1" size="small" class="bottom_two" @click="Delete()">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                删除
              </el-button>
            </div>
            <div>
              <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px">
                <el-link :underline="false">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_filtrate"></i>
                  </span>
                  筛选
                </el-link>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in table" :key="index">
                    <el-checkbox v-model="item.status">{{
                      item.label
                      }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="load()">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_export1"></i>
                </span>
                导出
              </el-link>
            </div>
          </div>
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column align="center" type="selection"></el-table-column>
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :min-width="item.width" :fixed="(item.label =='操作'||item.label =='生产线'||item.label =='使用仓'||item.label =='库存仓'||item.label =='浆水池')?'right':false">
                  <template slot-scope="scope">
                    <span v-if="item.label == '外协单位理论日产能'">
                      <span v-if="scope.row.outsourcingUnitCapacity == 0" style="color: #969799">不满足委托需求</span>
                      <span v-if="scope.row.outsourcingUnitCapacity == 1" style="color: #00a754">满足委托需求</span>
                    </span>

                    <span v-else-if="item.label == '状态'">
                      <span v-if="scope.row.enable == 0" style="color: #969799">禁用</span>
                      <span v-if="scope.row.enable == 1" style="color: #00a754">启用</span>
                    </span>
                    <div v-else-if="item.label == '操作'" style="position: relative;">
                      <el-dropdown :hide-on-click="false" trigger="click">
                        <el-button size="mini" class="bottom_one">更多</el-button>
                        <el-dropdown-menu slot="dropdown" style="text-align: left">
                          <el-dropdown-item>
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="changeline(scope.row)">生产线维护</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="changeusewarehouse(scope.row)">使用仓维护</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="changewarehouse(scope.row)">库存仓维护</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="dialog(scope.row)">浆水池维护</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="ButtonList.some(res=>(res.buttonValue=='XIUGAI'))">
                            <el-button style="margin:5px 0" class="bottom_one" size="mini" @click="pagesupdateFromDate(scope.row, '修改')">
                              修改
                            </el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="720px" :close-on-click-modal="false" :before-close="resetFromDate">
      <span slot="title" class="dialog-title">{{ addDialogTitle }}</span>
      <div class="dialoginfo">
        <el-form ref="reffromDate" :rules="rules" :inline="true" :model="fromDate" label-width="110px">
          <el-form-item v-if="UserInfo.adminStatus == 1" prop="companyId" :rules="[{required: true,message: '请选择公司',trigger: 'blur',}]">
            <span slot="label" style="color: #ff0000">公司</span>
            <el-select ref="selection1" v-model="fromDate.companyId" @change="setstationIdlist(),$nextTick(()=>{fromDate.company = $refs.selection1.selectedLabel})">
              <el-option v-for="item in companylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="stationId" :rules="[{required: true,message: '请选择站点',trigger: 'blur',}]">
            <span slot="label" style="color: #ff0000">站点名称</span>
            <el-select ref="selection2" v-model="fromDate.stationId" @change="get_simple_organizationFun(fromDate.stationId),$nextTick(()=>{fromDate.stationName = $refs.selection2.selectedLabel})">
              <el-option v-for="item in stationIdlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="dailyCapacity" label-width="120px">
            <span slot="label">理论日产能(㎡)</span>
            <el-input v-model="fromDate.dailyCapacity" style="width: 190px" onkeypress='return( /\d|\./.test(String.fromCharCode(event.keyCode)))' @input="fromDate.dailyCapacity=$regExp.checkNum(fromDate.dailyCapacity)" @blur="fromDate.dailyCapacity=$regExp.blurCheckNum(fromDate.dailyCapacity)">
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <span slot="label">条码编码</span>
            <el-input v-model="fromDate.code" placeholder="请输入" clearable @input="changecode('code')" @blur="barcodeBlur()"></el-input>
          </el-form-item>
          <el-form-item prop="stationAddress">
            <span slot="label">站点地址</span>
            <el-input v-model="fromDate.stationAddress" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <div>
            <el-form-item>
              <span slot="label">地图选点</span>
              <div class="mapbutton ellipsis" @click="mapVisible = true">
                {{ fromDate.reconnaissanceAddress }}
              </div>
            </el-form-item>
          </div>
          <el-form-item>
            <span slot="label">经度</span>
            <el-input v-model="fromDate.longitude" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">纬度</span>
            <el-input v-model="fromDate.dimensionality" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">电子围栏(千米)</span>
            <el-input v-model="fromDate.electronicFence" placeholder="请输入" onkeypress='return( /\d|\./.test(String.fromCharCode(event.keyCode)))' @input="fromDate.electronicFence=$regExp.checkNum(fromDate.electronicFence)" @blur="fromDate.electronicFence=$regExp.blurCheckNum(fromDate.electronicFence)"></el-input>
          </el-form-item>
          <el-form-item class="FZYplaceholder TabsWarp">
            <span slot="label">负责人</span>
            <TreeSelect ref="principalName" v-model="fromDate.principalId0" :loadData="onLoadData" :placeholder="principalName" style="width: 200px;height:36px;z-index:100000;" :tree-data="treeData" allowClear :replaceFields="{title:'name',value:'id'}" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" treeNodeFilterProp="title" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}" @change="fromDate.principalId=fromDate.principalId0,$nextTick(() => {fromDate.principalName=$refs.principalName.$el.innerText})"></TreeSelect>
          </el-form-item>
          <el-form-item prop="stationPhone">
            <span slot="label">站点电话</span>
            <el-input v-model="fromDate.stationPhone" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">外协单位</span>
            <el-select v-model="fromDate.outsourcingUnitIds" multiple placeholder="请选择">
              <el-option v-for="item in outsourcingUnitList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="fromDate.outsourcingUnitIds.length>0" prop="outsourcingUnitCapacity" label-width="140px">
            <span slot="label">外协单位理论日产能</span>
            <el-radio-group v-model="fromDate.outsourcingUnitCapacity">
              <el-radio label="1">满足委托要求</el-radio>
              <el-radio label="0">不满足委托要求</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <span slot="label">试验单位</span>
            <el-input v-model="fromDate.testUnit" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="pagessubmitFromDate()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 地图选点 -->
    <el-dialog v-dialogDrag :visible.sync="mapVisible" width="80%" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">地图选点</span>
      <div class="amap-page-container">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
        <el-amap v-if="mapVisible" ref="amapManager" :zoom="zoom" :events="events" :center="mapCenter" :plugin="plugin" class="amap-demo">
          <el-amap-marker :position="markers.position" :events="markers.events" :draggable="markers.draggable"></el-amap-marker>
        </el-amap>
        <div class="toolbar">
          <span v-if="loaded">
            position: {{ markers.position }} address: {{ address }}
          </span>
          <span v-else>正在定位</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="mapVisible = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="savepoint()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 生产线维护 -->
    <el-dialog v-dialogDrag :visible.sync="lineDialog" width="900px" :close-on-click-modal="false" :before-close="resetOtherFromDate">
      <span slot="title" class="dialog-title">生产线维护</span>
      <div style="padding-bottom: 10px">
        <el-button size="mini" class="bottom_all" style="margin-left: 0" @click="addline()">
          <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
          添加
        </el-button>
      </div>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="lineList" tooltip-effect="dark">
          <el-table-column label="生产线" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" style="width: 100%" placeholder="请输入" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="生产线日产能" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.output" style="width: 100%" type="Number" placeholder="请输入" clearable>
                <template slot="append">方</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="使用仓" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.list" style="width: 100%" multiple placeholder="请选择">
                <el-option v-for="(item, index) in usewarehousearr" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" class="bottom_two" @click="Deleteline(scope.$index)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetOtherFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="saveline">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 使用仓维护 -->
    <el-dialog v-dialogDrag :visible.sync="usewarehouseDialog" width="900px" :close-on-click-modal="false" :before-close="resetOtherFromDate">
      <span slot="title" class="dialog-title">使用仓维护</span>
      <div style="padding-bottom: 10px">
        <el-button size="mini" class="bottom_all" style="margin-left: 0" @click="addusewarehouse()">
          <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
          添加
        </el-button>
      </div>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="usewarehouseList" tooltip-effect="dark">
          <el-table-column label="使用仓" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" style="width: 100%" placeholder="请输入" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存仓" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.list" style="width: 100%" multiple placeholder="请选择">
                <el-option v-for="(item, index) in warehousearr" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" class="bottom_two" @click="Deleteusewarehouse(scope.$index)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetOtherFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="saveusewarehouse">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 库存仓维护 -->
    <el-dialog v-dialogDrag :visible.sync="warehouseDialog" width="900px" :close-on-click-modal="false" :before-close="resetOtherFromDate">
      <span slot="title" class="dialog-title">库存仓维护</span>
      <div style="padding-bottom: 10px">
        <el-button size="mini" class="bottom_all" style="margin-left: 0" @click="addwarehouse()">
          <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
          添加
        </el-button>
      </div>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="warehouseList" tooltip-effect="dark">
          <el-table-column label="库存仓" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" style="width: 100%" placeholder="请输入" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="满仓量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stock" style="width: 100%" placeholder="请输入" clearable oninput="if(value.length > 11 ){ value = value.slice(0,11)}" onkeypress='return( /\d|\./.test(String.fromCharCode(event.keyCode)))' @input="scope.row.stock=$regExp.checkNum(scope.row.stock)" @blur="scope.row.stock=$regExp.blurCheckNum(scope.row.stock)">
                <template slot="append">吨</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" class="bottom_two" @click="Deletewarehouse(scope.$index)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetOtherFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="savewarehouse">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 浆水池维护 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog1" width="580px" :close-on-click-modal="false" :before-close="resetOtherFromDate">
      <span slot="title" class="dialog-title">浆水池维护</span>
      <div>
        <div style="padding-bottom: 10px">
          <el-button size="mini" class="bottom_all" style="margin-left: 0" @click="add1('添加')">
            <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
            添加
          </el-button>
        </div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="arr1" tooltip-effect="dark">
          <el-table-column label="浆水池" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" style="width: 100%" placeholder="请输入" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" class="bottom_two" @click="delete1(scope.$index)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetOtherFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="submit1()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { TreeSelect } from 'ant-design-vue';

import mixin from "@/mixins/ICPSmixin.js";
import VueAMap from "vue-amap";
VueAMap.initAMapApiLoader({
  key: "9b26a3f5167523be11d0f55fef1b0437",
  plugin: [
    "AMap.Geolocation",
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Geocoder",
  ],
  v: "1.4.4",
  uiVersion: "1.0.11",
});
import {
  queryPage,
  batchUpdateOrDelete,
  updateSortNum,
  saveOrUpdate,
  Download,
  warehousePage,
  warehousesaveOrUpdate,
  wareusehousePage,
  queryListsByStationId,
  wareusehousesaveOrUpdate,
  getusewarehousearr,
  getPLByStationId,
  saveOrUpdateProductLine,
  getListByPid,
  saveseriflux,
  stationQueryCode,
} from "@/api/basicConfig/site.js";
import { queryPage as queryuserPage } from "@/api/basedata/user";
import { querysupplierPage } from "@/api/GHnumber/supplier.js";
import { getUserInfo } from "@/utils/auth.js";
import { orgUserTree, permissionsCompanyList, getUserAut, get_simple_organization, getPermissionsUserTree, getOrgznizationAndUsersTree } from "@/api/common.js";
import { get_station_list } from "@/api/smart/stocksake.js";
import { setTimeout } from 'timers';
export default {
  components: { TreeSelect },
  mixins: [mixin],
  data() {
    let _this = this;
    const reconnaissanceAddressrules = (rule, value, callback) => {
      if (value === "" || value == "请选择地图标点") {
        callback(new Error("请在地图上进行选点标记"));
      } else {
        callback();
      }
    };
    var landlinePhone = (rule, value, callback) => {
      if (value && !this.$regExp.landlinePhoneReg(value)) {
        return callback(new Error('电话格式错误！'));
      } else {
        callback();
      }
    };
    return {
      TreeSelectStypeNumber: 0,
      treeData: [],
      UserInfo: "",
      companylist: [],
      stationIdlist: [],
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      batchUpdateOrDelete: batchUpdateOrDelete,
      updateSortNum: updateSortNum,
      saveOrUpdate: saveOrUpdate,
      DownloadURL: Download,
      /*表格数据*/
      table: [
        { label: "站点编码", width: "160", prop: "code", status: true },
        { label: "公司", width: "160", prop: "company", status: true },
        { label: "站点名称", width: "140", prop: "stationName", status: true },
        {
          label: "理论日产能",
          width: "120",
          prop: "dailyCapacity",
          status: true,
        },
        {
          label: "站点地址",
          width: "140",
          prop: "stationAddress",
          status: true,
        },
        {
          label: "外协单位",
          width: "160",
          prop: "outsourcingUnit",
          status: true,
        },
        {
          label: "外协单位理论日产能",
          width: "160",
          prop: "outsourcingUnitCapacity",
          status: true,
        },
        { label: "负责人", width: "140", prop: "principalName", status: true },
        {
          label: "站点电话",
          width: "120",
          prop: "stationPhone",
          status: true,
        },
        {
          label: "试验单位",
          width: "120",
          prop: "testUnit",
          status: true,
        },
        {
          label: "更新时间",
          width: "135",
          prop: "updateTime",
          status: true,
        },
        // { label: "生产线", width: "130", prop: "", status: true },
        // { label: "使用仓", width: "130", prop: "", status: true },
        // { label: "库存仓", width: "130", prop: "", status: true },
        // { label: "浆水池", width: "130", prop: "", status: true },
        { label: "操作", width: "100", prop: "", status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      rules: {
        code: [
          { required: true, message: "请选输入站点编码", trigger: "change" },
        ],
        dailyCapacity: [
          { required: true, message: "请输入日产能", trigger: "change" },
        ],
        stationAddress: [
          { required: true, message: "请输入站点地址", trigger: "change" },
        ],
        principalId: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
        reconnaissanceAddress: [
          { validator: reconnaissanceAddressrules, trigger: "change" },
        ],
        stationPhone: [{ validator: landlinePhone, trigger: 'change' }],
      },
      fromDate: {
        electronicFence: '',
        company: "",
        companyId: "",
        stationId: "",
        stationName: "",
        dailyCapacity: "",
        stationAddress: "",
        longitude: "",
        dimensionality: "",
        outsourcingUnit: "",
        outsourcingUnitCapacity: "1",
        principalName: "",
        principalId: "",
        stationPhone: "",
        reconnaissanceAddress: "请选择地图标点",
        code: "",
        outsourcingUnitIds: [],
      },
      principalName: "",
      point: "",
      mapVisible: false,
      principalarr: [],
      /*公用数据*/
      id: "",
      list: [],

      /*生产线*/
      lineDialog: false,
      lineList: [],
      usewarehousearr: [],
      /*使用仓维护*/
      usewarehouseDialog: false,
      usewarehouseList: [],
      warehousearr: [],
      /*库存仓维护*/
      warehouseDialog: false,
      warehouseList: [],
      /*地图*/
      zoom: 14,
      mapCenter: [104.053317, 30.549161],
      events: {
        'click': (e) => {
          _this.markers.position = [e.lnglat.lng, e.lnglat.lat];
          _this.getaddress(_this.markers.position)
        }
      },
      loaded: false,
      plugin: [
        {
          pName: "Geolocation",
          events: {
            init(o) {
              console.log(2);
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (_this.fromDate.longitude !== '') {
                  _this.address = _this.fromDate.reconnaissanceAddress
                  _this.mapCenter = [_this.fromDate.longitude, _this.fromDate.dimensionality];
                  _this.markers.position = [_this.fromDate.longitude, _this.fromDate.dimensionality];
                  _this.loaded = true;
                  _this.$nextTick();
                } else {
                  if (result && result.position) {
                    _this.lng = result.position.lng;
                    _this.lat = result.position.lat;
                    _this.mapCenter = [_this.lng, _this.lat];
                    _this.markers.position = [_this.lng, _this.lat];
                    _this.loaded = true;
                    _this.$nextTick();
                  }
                }

              });
            },
          },
        },
      ],
      address: "逸都国际",
      markers: {
        position: [104.045543, 30.53947],
        events: {
          dragend: (e) => {
            _this.markers.position = [e.lnglat.lng, e.lnglat.lat];
            _this.getaddress(_this.markers.position)
          },
        },
        draggable: true,
      },
      searchOption: {
        city: "四川省,重庆市",
        citylimit: true,
      },
      outsourcingUnitList: [],
      userarr: [],
      /*浆水池维护*/
      Dialog1: false,
      low: {},
      arr1: [],
      oldarr1: [],
    };
  },
  async created() {
    this.UserInfo = await getUserInfo();
    console.log(this.UserInfo)
    if (this.UserInfo.adminStatus == 1) {
      this.companylist = await permissionsCompanyList();
    } else {
      // this.stationIdlist = await getUserAutList(true)
      getUserAut('type').then((res) => {
        this.stationIdlist = res.data.pointList//站点	 
        this.getStationIdlistFun(0, res.data.companyIds)
      })
    }

    this.principalarr = await orgUserTree();
    let params = {
      page: 1,
      pageSize: 100000,
    };
    querysupplierPage({ ...params, enable: 1, typeId: "0" }).then((res) => {
      this.outsourcingUnitList = res.data.data;
    });
    queryuserPage({ ...params, userEentrance: "entrance_manager" }).then(
      (res) => {
        this.userarr = res.data.data;
      }
    );
    this.treeData = await getPermissionsUserTree()
  },
  mounted() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = { ...this.tableParam, code: "", stationName: "" };
    this.gettableData();
  },
  methods: {
    addPoint() {
      this.addFromDate('添加');
      this.principalName = '';
      this.fromDate.stationId = this.UserInfo.pointIds[0];
      this.fromDate.stationName = this.UserInfo.pointName;
      this.fromDate.companyId = this.UserInfo.companyId;
      this.fromDate.company = this.UserInfo.companyName;
    },
    barcodeBlur() {
      stationQueryCode({ code: this.fromDate.code, id: this.fromDate.id }).then((res) => {
        if (!res.data) {
          this.$message({
            message: '条码编码重复！',
            type: 'warning'
          });
          this.fromDate.code = ''
        }
      })
    },
    /**逆向编码*/
    getaddress(lnglat) {
      let _this = this
      AMap.plugin('AMap.Geocoder', function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })
        geocoder.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            _this.address = result.regeocode.formattedAddress
            // result为对应的地理位置详细信息
          }
        })
      })
    },
    /**通过站点查询公司 */
    get_simple_organizationFun(id) {
      get_simple_organization({ id: id }).then((res) => {
        this.fromDate.companyId = res.data.id
        this.fromDate.company = res.data.name
      });//查询站点所属公司
    },
    /**遍历公司查询站点组装并去重 */
    getStationIdlistFun(i, d) {
      if (i < d.length) {
        get_station_list({ parentId: d[i] }).then((res) => {
          res.data.forEach((v) => {
            this.stationIdlist.push({
              id: v.id,
              name: v.name
            })
          })
          i++
          if (i < d.length) {
            this.getStationIdlistFun(i, d)
          } else {
            let map = new Map();
            for (let item of this.stationIdlist) {
              if (!map.has(item.id)) {
                map.set(item.id, item);
              }
            }
            this.stationIdlist = [...map.values()];
          }
        });
      }
    },
    /*根据公司获取站点*/
    setstationIdlist() {
      get_station_list({ parentId: this.fromDate.companyId }).then((res) => {
        this.stationIdlist = res.data;
      });
    },
    /*浆水池维护*/
    /*获取浆水池*/
    dialog(low) {
      this.low = low;
      getListByPid({ stationId: low.id }).then((res) => {
        this.arr1 = this.copy(res.data);
        this.oldarr1 = this.copy(res.data);
        this.Dialog1 = true;
      });
    },
    add1() {
      let item = {
        stationId: this.low.id,
        name: "",
        type: 1,
      };
      this.arr1.push(item);
    },
    delete1(index) {
      this.arr1.splice(index, 1);
    },
    /*保存*/
    submit1() {
      console.log(this.low);
      let allHasData = this.arr1.filter((item) =>
        this.oldarr1.some((items) => item.id == items.id)
      );
      allHasData.forEach((res) => {
        res.type = 2;
      });
      let deleteData = this.oldarr1.filter(
        (item) => !allHasData.some((items) => item.id == items.id)
      );
      deleteData.forEach((res) => {
        res.type = 0;
      });
      let addData = this.arr1.filter(
        (item) => !allHasData.some((items) => item.id == items.id)
      );

      let arr = [...allHasData, ...addData, ...deleteData];
      saveseriflux(arr).then((res) => {
        if (res.code * 1 === 1001) {
          this.$message.success("保存成功!!!")
          this.Dialog1 = false;
        }
      });
    },
    pagesupdateFromDate(data, text) {
      for (let key in this.fromDate) {
        this.fromDate[key] = data[key];
      }
      this.fromDate.outsourcingUnitIds = this.fromDate.outsourcingUnitIds ?.split(",") || [];
      this.fromDate.outsourcingUnit = "";
      this.fromDate.principalId = data.principalId;
      this.fromDate.stationId = data.id;
      this.fromDate.id = data.id;
      this.fromDate.electronicFence = data.electronicFence;
      this.addDialogTitle = text;
      this.addDialog = true;
      this.principalName = data.principalName;
      setTimeout(() => {
        this.$refs.reffromDate.clearValidate();
      }, 10);
    },
    pagessubmitFromDate() {
      let _this = this;
      this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          if (_this.fromDate.outsourcingUnitIds.length > 0) {
            let data = _this.outsourcingUnitList.filter((res) =>
              _this.fromDate.outsourcingUnitIds.some((items) => res.id == items)
            );
            let key = data.map((res) => {
              return res.name;
            });
            _this.fromDate.outsourcingUnit = key.join(",");
            _this.fromDate.outsourcingUnitIds = _this.fromDate.outsourcingUnitIds.join(
              ","
            );
          } else {
            _this.fromDate.outsourcingUnitIds = ''
          }
          console.log(JSON.parse(JSON.stringify(this.fromDate)))
          this.submitFromDate();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /*地图*/
    onSearchResult(pois) {
      console.log(pois[0]);
      let _this = this;
      if (pois.length > 0) {
        _this.address = pois[0].name;
        _this.markers.position = [pois[0].lng, pois[0].lat];
        _this.mapCenter = [pois[0].lng, pois[0].lat];
      }
    },
    savepoint() {
      this.fromDate.reconnaissanceAddress = this.address;
      this.fromDate.stationAddress = this.address;
      this.fromDate.longitude = this.markers.position[0];
      this.fromDate.dimensionality = this.markers.position[1];
      this.mapVisible = false;
    },
    /*重置数据*/
    init() {
      this.tableParam.code = "";
      this.tableParam.stationName = "";
      this.gettableData();
    },
    /*生产线*/
    changeline(data) {
      this.id = data.id;
      getPLByStationId({ stationId: data.id }).then((res) => {
        this.list = res.data.map((res) => {
          let obj = new Object();
          obj.id = res.id;
          obj.type = 2;
          obj.stationId = res.stationId;
          obj.name = res.name;
          obj.output = res.output;
          obj.list = res.list.map((ress) => {
            let item = {
              id: ress.id, //获取时的id  //删除必传
              type: 2, //新增传1 不变传2 删除传0
              useBankId: ress.useBankId, //原物料id
            };
            return item;
          });
          return obj;
        });
        this.lineList = res.data.map((res) => {
          let obj = new Object();
          obj.id = res.id;
          obj.type = 2;
          obj.stationId = res.stationId;
          obj.name = res.name;
          obj.output = res.output;
          obj.list = res.list.map((ress) => {
            let item = ress.useBankId;
            return item;
          });
          return obj;
        });
      });
      getusewarehousearr({ stationId: data.id }).then((res) => {
        this.usewarehousearr = res.data;
      });
      this.lineDialog = true;
    },
    addline() {
      const data = {
        stationId: this.id,
        name: "",
        output: null,
        type: 1,
        list: [],
      };
      this.lineList.push(data);
    },
    Deleteline(index) {
      this.lineList.splice(index, 1);
    },
    saveline() {
      let str = this.copy(this.lineList);
      let data = this.lineContrast(str);
      saveOrUpdateProductLine(data).then((res) => {
        if (res.code === 1001) {
          this.resetOtherFromDate();
          this.$message.success('操作成功')
        }
      });
    },
    lineContrast(arr) {
      /*对比未操作的相同数据*/
      let allData = arr.filter((item) =>
        this.list.some((items) => item.id == items.id)
      );
      if (allData.length !== 0) {
        allData = allData.map((res) => {
          let val = this.list.find((item) => item.id == res.id).list;
          console.log(val);
          let allitems = val.filter((item) =>
            res.list.some((items) => item.useBankId == items)
          );
          let additems = res.list.filter(
            (item) => !allitems.some((items) => item == items.useBankId)
          );
          if (additems.length !== 0) {
            additems = additems.map((res) => {
              let obj = {
                type: 1, //新增传1 不变传2 删除传0
                useBankId: res, //原物料id
              };
              return obj;
            });
          }
          let deleteitems = val.filter(
            (item) =>
              !allitems.some((items) => item.useBankId == items.useBankId)
          );
          if (deleteitems.length !== 0) {
            deleteitems.map((res) => {
              res.type = 0;
            });
          }
          res.list = [...allitems, ...additems, ...deleteitems];
          return res;
        });
      }
      let deleteData = this.list.filter(
        (item) => !allData.some((items) => item.id == items.id)
      );
      if (deleteData.length !== 0) {
        deleteData.map((res) => {
          res.type = 0;
        });
      }
      let addData = arr.filter(
        (item) => !allData.some((items) => item.id == items.id)
      );
      if (addData.length !== 0) {
        addData = addData.map((res) => {
          console.log(res.list);
          res.list = res.list.map((item) => {
            console.log(item);
            let obj = new Object();
            obj.useBankId = item;
            obj.type = 1;
            return obj;
          });
          return res;
        });
      }
      return [...allData, ...deleteData, ...addData];
    },
    /*使用仓*/
    changeusewarehouse(data) {
      this.id = data.id;
      wareusehousePage({ stationId: data.id }).then((res) => {
        this.list = res.data.map((res) => {
          let obj = new Object();
          obj.id = res.id;
          obj.type = 2;
          obj.stationId = res.stationId;
          obj.name = res.name;
          obj.list = res.bvlist.map((ress) => {
            let item = {
              id: ress.id, //获取时的id  //删除必传
              type: 2, //新增传1 不变传2 删除传0
              surplusBankId: ress.surplusBankId, //原物料id
            };
            return item;
          });
          return obj;
        });
        console.log(res.data);
        this.usewarehouseList = res.data.map((res) => {
          let obj = new Object();
          obj.id = res.id;
          obj.type = 2;
          obj.stationId = res.stationId;
          obj.name = res.name;
          obj.list = res.bvlist.map((ress) => {
            let item = ress.surplusBankId;
            return item;
          });
          return obj;
        });
        console.log(this.usewarehouseList);
      });
      queryListsByStationId({ stationId: data.id }).then((res) => {
        this.warehousearr = res.data;
      });
      this.usewarehouseDialog = true;
    },
    addusewarehouse() {
      const data = {
        stationId: this.id,
        name: "",
        type: 1,
        list: [],
      };
      this.usewarehouseList.push(data);
    },
    Deleteusewarehouse(index) {
      this.usewarehouseList.splice(index, 1);
    },
    saveusewarehouse() {
      let str = this.copy(this.usewarehouseList);
      let data = this.usedataContrast(str);
      wareusehousesaveOrUpdate(data).then((res) => {
        if (res.code === 1001) {
          this.$message.success('操作成功')
          this.resetOtherFromDate();
        }
      });
    },
    usedataContrast(arr) {
      /*对比未操作的相同数据*/
      let allData = arr.filter((item) =>
        this.list.some((items) => item.id == items.id)
      );
      let deleteData = this.list.filter(
        (item) => !allData.some((items) => item.id == items.id)
      );
      if (deleteData.length !== 0) {
        deleteData = deleteData.map((res) => {
          res.type = 3;
          res.list = res.list.map(item => (item.id))
          return res
        });
      }
      let addData = arr.filter(
        (item) => !allData.some((items) => item.id == items.id)
      );
      if (addData.length !== 0) {
        addData = addData.map((res) => {
          return res;
        });
      }
      return [...allData, ...deleteData, ...addData];
    },
    /*库存仓*/
    changewarehouse(data) {
      this.id = data.id;
      warehousePage({ stationId: data.id }).then((res) => {
        this.list = res.data.map((res) => {
          let obj = new Object();
          obj.id = res.id;
          obj.type = 2;
          obj.stationId = res.stationId;
          obj.name = res.name;
          obj.stock = res.stock;
          return obj;
        });
        let arr = this.copy(this.list);
        this.warehouseList = arr.map((res) => {
          let obj = new Object();
          obj.id = res.id;
          obj.type = 2;
          obj.stationId = res.stationId;
          obj.name = res.name;
          obj.stock = res.stock;
          return obj;
        });
      });
      this.warehouseDialog = true;
    },
    addwarehouse() {
      const data = {
        stationId: this.id,
        name: "",
        stock: null,
        type: 1,
      };
      this.warehouseList.push(data);
    },
    Deletewarehouse(index) {
      this.warehouseList.splice(index, 1);
    },
    savewarehouse() {
      /*数据外层对比，并集除去交集为添加删除数据，并集里没数据的list为修改或者无修改数据*/
      let str = this.copy(this.warehouseList);
      let data = this.dataContrast(str);
      warehousesaveOrUpdate(data).then((res) => {
        if (res.code == 1001) {
          this.resetOtherFromDate();
          this.$message({
            message: '设置成功',
            type: 'success'
          });
        }
      });
    },
    dataContrast(arr) {
      // console.log('原数组', this.list);
      // console.log('变化数数组', arr);
      /*对比未操作的相同数据*/
      let allData = arr.filter((item) =>
        this.list.some((items) => item.id == items.id)
      );
      console.log("未变化数据", allData);
      let deleteData = this.list.filter(
        (item) => !allData.some((items) => item.id == items.id)
      );
      if (deleteData.length !== 0) {
        deleteData.map((res) => {
          res.type = 0;
        });
      }

      console.log("删除数据", deleteData);
      let addData = arr.filter(
        (item) => !allData.some((items) => item.id == items.id)
      );
      if (addData.length !== 0) {
        addData = addData.map((res) => {
          console.log(res.list);
          return res;
        });
      }
      console.log("添加数据", addData);
      return [...allData, ...deleteData, ...addData];
    },
    resetOtherFromDate() {
      this.lineDialog = false;
      this.warehouseDialog = false;
      this.usewarehouseDialog = false;
      this.Dialog1 = false;
      this.id = "";
    },
    // TreeSelectStypeFun() {//作废，用于设置：负责人组件层级样式修改
    //   if (this.TreeSelectStypeNumber === 0) {
    //     this.TreeSelectStypeNumber = 1;
    //     setTimeout(() => {
    //       const dom = document.body.lastChild;
    //       dom.style.zIndex = '10000'
    //     }, 1000)
    //   }
    // },
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) { // 有值了直接渲染
          resolve()
          return
        }
        /**获取自己公司加权限组织树带人员的 */
        // 没有值根据当前父节点获取下面子节点并挂在树节点中，添加到对应父节点的children中
        getOrgznizationAndUsersTree(treeNode.dataRef.id).then(res => {
          let children = res.data[0].children
          this.diGui(children)
          treeNode.dataRef.children = children
          this.$forceUpdate()
          console.log(JSON.parse(JSON.stringify(this.treeData)))
        })
        resolve()
      })
    },
    //递归判断是否是子节点
    diGui(arr) {
      if (arr.length > 0) {
        arr.forEach((res) => {
          if (res.children > 0) {
            this.diGui(res.children)
          } else {
            delete res.children
            if (res.selectable == true) {
              res.isLeaf = true
            }
          }
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.toolbar {
  padding-top: 10px;
}
.amap-page-container {
  position: relative;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.el-input,
.el-select,
.el-cascader {
  width: 200px;
}
.mapbutton {
  width: 300px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  padding: 0 15px;
  height: 36px;
  line-height: 36px;
}
.mapbutton:hover {
  border-color: $bg_color;
  cursor: pointer;
}
.amap-demo {
  height: 570px;
}
</style>
<style>
.FZYplaceholder .ant-select-selection__placeholder {
  color: rgba(0, 0, 0, 0.65) !important;
}
</style>

